 <template>
 	<view class="container">
 		<label for="" @click="toggleSelection">
 			<view class="button" :style="{ backgroundPosition: isSelected ? '0 -50px' : '0 0' }">

 			</view>
 			<span>
 				公开昵称
 			</span>
 		</label>

 	</view>
 </template>

 <script setup>
 	import {
 		ref
 	} from "vue";

 	const isSelected = ref(false); // 控制选中状态

 	const toggleSelection = () => {
 		isSelected.value = !isSelected.value; // 切换状态
 	};
 </script>

 <style scoped>
 	.container {
 		display: flex;
 		align-items: center;
 		/* justify-content: center;
        align-items: center; */
 		/* height: 100vh; */
 	}

 	label {
 		display: flex;
 		align-items: center;
 	}

 	.button {
 		/* background-color: aqua; */
 		border-radius: 50%;
 		border: 3rpx solid #ccc;
 		width: 30rpx;
 		height: 30rpx;
 		/* background-image: url("/static/checked.svg"); */
 		/* 替换为你的精灵图路径 */
 		background-repeat: no-repeat;
 		/* background-size: 50px 100px; */
 		background-size: 100% 100%;
 		/* 根据精灵图尺寸调整 */
 		cursor: pointer;
 		margin-right: 20rpx;
 	}
 </style>